<template>
    <el-card>
        <div slot="header">
            <span>轮播图管理</span>
        </div>

        <div style="min-width: 300px">
            <el-button type="primary" icon="el-icon-plus" @click="openAddDialog">新增</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="openUpdateDialog">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteBanner">删除</el-button>
        </div>

        <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="bannerData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column style="height: 40px"
                             label="轮播图"
                             align="center">
                <div slot-scope="scope">
                    <el-image :src="scope.row.url" class="banner-image-table-column"/>
                </div>
            </el-table-column>
            <el-table-column
                    prop="clickUrl"
                    label="跳转链接"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序值"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="添加时间"
                    align="center">
            </el-table-column>
        </el-table>

        <el-dialog title="添加轮播图" :visible.sync="showDialog" @open="dialogOpen">
            <el-form :model="form" ref="form" size="small">
                <el-form-item label="轮播图图片:" :error="bannerImageShowError?'轮播图图片不能为空':''"
                              class="banner-image-form-item">
                    <el-upload
                            class="banner-image"
                            action="btpj"
                            :http-request="uploadFile"
                            :show-file-list="false"
                            :before-upload="beforeImageUpload">
                        <el-image v-if="form.url" :src="form.url" class="avatar" alt="轮播图图片"/>
                        <i v-else class="el-icon-plus avatar-uploader-icon"/>
                    </el-upload>
                </el-form-item>
                <el-form-item label="跳转链接">
                    <el-input v-model="form.clickUrl"></el-input>
                </el-form-item>
                <el-form-item label="排序值">
                    <el-input v-model="form.sort" type="number"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="showDialog = false">取消</el-button>
                    <el-button @click="addDialogShow?addBanner():updateBanner()" type="primary">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-card>
</template>

<script>
    import {addBannerReq, deleteBannersReq, getBannerListReq, updateBannerReq} from "../api/bannerApi";
    import {uploadFile} from "../api/fileApi";

    export default {
        name: "BannerConfig",
        data() {
            return {
                loading: false,
                bannerData: [{
                    id: '',
                    url: '',
                    clickUrl: '',
                    sort: 0,
                    updateTime: '',
                }],
                selBanners: [],
                showDialog: false,
                addDialogShow: false,
                updateDialogShow: false,
                bannerImageShowError: false,
                form: {
                    url: '',
                    clickUrl: '',
                    sort: 0
                },
            }
        },
        mounted() {
            this.getBannerList();
        },
        methods: {
            getBannerList() {
                this.loading = true;
                getBannerListReq().then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.bannerData = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },
            beforeImageUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt10M = file.size / 1024 / 1024 < 10;
                if (!isJPG && !isPNG) {
                    this.$message.error('上传商品图片只能是 JPG/PNG 格式!');
                }
                if (!isLt10M) {
                    this.$message.error('上传商品图片大小不能超过 10MB!');
                }
                return (isJPG || isPNG) && isLt10M;
            },
            uploadFile(params) {
                uploadFile(params.file).then(res => {
                    console.log(res);
                    if (res.status === 0) {
                        this.form.url = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },
            handleSelectionChange(selection) {
                this.selBanners = selection;
            },
            addBanner() {
                this.bannerImageShowError = this.form.url.trim().length === 0;
                if (!this.bannerImageShowError) {
                    addBannerReq(this.form.url, this.form.clickUrl, this.form.sort).then(res => {
                        if (res.status === 0) {
                            this.$message.success(res.msg);
                            this.showDialog = false;
                            this.getBannerList();
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                }
            },
            updateBanner() {
                this.bannerImageShowError = this.form.url.trim().length === 0;
                if (!this.bannerImageShowError) {
                    updateBannerReq(this.form.id, this.form.url, this.form.clickUrl, this.form.sort).then(res => {
                        if (res.status === 0) {
                            this.$message.success(res.msg);
                            this.showDialog = false;
                            this.getBannerList();
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                }
            },
            openAddDialog() {
                this.showDialog = true;
                this.addDialogShow = true;
                this.updateDialogShow = false;
            },
            openUpdateDialog() {
                if (this.selBanners.length === 0) {
                    this.$message.error("请先选择一条要修改的轮播图信息");
                } else if (this.selBanners.length > 1) {
                    this.$message.error("一次只能修改一条轮播图信息");
                } else {
                    this.showDialog = true;
                    this.addDialogShow = false;
                    this.updateDialogShow = true;
                }
            },
            dialogOpen() {
                if (!this.updateDialogShow) {
                    this.form.sort = 0;
                    this.form.clickUrl = '';
                    this.form.url = '';
                } else {
                    this.form = this.selBanners[0];
                }
            },
            deleteBanner() {
                if (this.selBanners.length === 0) {
                    this.$message.error("请至少选择一条要删除的轮播图信息");
                } else {
                    this.$confirm("将删除" + this.selBanners.length + "条轮播图信息，确认删除？", '提示', {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: "error"
                    }).then(() => {
                        let ids = '';
                        this.selBanners.forEach(it => ids += it.id + ',');
                        ids = ids.substr(0, ids.length - 1);
                        deleteBannersReq(ids).then(res => {
                            if (res.status === 0) {
                                this.$message.success(res.msg);
                                this.getBannerList();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    });
                }
            },
        }
    }
</script>

<style scoped lang="stylus">
    .el-card {
        text-align left
        margin 10px
        min-height calc(100vh - 120px)

        .el-table {
            margin-top 20px

            .banner-image-table-column {
                height 150px
                width 200px
            }
        }

        .banner-image-form-item {
            margin-top -20px

            .banner-image {
                border: 1px dashed #d9d9d9;
                width 110px
                border-radius: 6px;
                margin 30px 0 10px 0
                cursor: pointer;

                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 110px;
                    height: 110px;
                    line-height: 110px;
                    text-align: center;
                }

                .avatar {
                    width: 110px
                    height: 110px
                    display: block
                }
            }
        }
    }
</style>
